<!--
  功能：功能描述
  作者：王代彬
  时间：2021年03月23日 10:08:46
  版本：v1.0
-->
<template>
    <div class="gojs_page_right">
        <el-tabs v-model="activeName">
            <el-tab-pane label="节点信息" name="first">
                <el-form
                    label-position="right"
                    label-width="80px"
                    :model="formData"
                >
                    <el-form-item label="节点ID">
                        <el-input disabled v-model="formData.key"></el-input>
                    </el-form-item>
                    <el-form-item label="图例标识">
                        <el-input
                            disabled
                            v-model="formData.category"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="业务id">
                        <el-input
                            v-model="formData.businessId"
                            @change="
                                onChangeNodeProps(
                                    'businessId',
                                    formData.businessId
                                )
                            "
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="节点描述">
                        <el-input
                            v-model="formData.nodeName"
                            @change="
                                onChangeNodeProps('nodeName', formData.nodeName)
                            "
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        label="文本内容"
                        v-if="categoryText.includes(formData.category)"
                    >
                        <el-input
                            v-model="formData.text"
                            @change="onChangeNodeProps('text', formData.text)"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="宽度">
                        <el-input-number
                            :value="formData.size | nodeWidth"
                            style="width: 198px"
                            :precision="0"
                            @change="
                                (val) =>
                                    onChangeNodeProps(
                                        'size',
                                        `${val} ${formData.size.split(' ')[1]}`
                                    )
                            "
                            :min="0"
                            label="请输入"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="高度">
                        <el-input-number
                            style="width: 198px"
                            :value="formData.size | nodeHeight"
                            @change="
                                (val) =>
                                    onChangeNodeProps(
                                        'size',
                                        `${formData.size.split(' ')[0]} ${val}`
                                    )
                            "
                            :precision="0"
                            :min="0"
                            label="请输入"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="中心坐标X">
                        <el-input-number
                            :value="formData.loc | nodeWidth"
                            style="width: 198px"
                            :precision="0"
                            @change="
                                (val) =>
                                    onChangeNodeProps(
                                        'loc',
                                        `${val} ${formData.loc.split(' ')[1]}`
                                    )
                            "
                            label="请输入"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="中心坐标Y">
                        <el-input-number
                            :value="formData.loc | nodeHeight"
                            style="width: 198px"
                            :precision="0"
                            @change="
                                (val) =>
                                    onChangeNodeProps(
                                        'loc',
                                        `${formData.loc.split(' ')[0]} ${val}`
                                    )
                            "
                            label="请输入"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="旋转角度">
                        <el-input-number
                            style="width: 198px"
                            :precision="0"
                            :value="formData.angle"
                            @change="(val) => onChangeNodeProps('angle', val)"
                            :min="0"
                            label="请输入"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item
                        label="颜色"
                        v-if="categoryColor.includes(formData.category)"
                    >
                        <el-color-picker
                            v-model="formData.stroke"
                            :predefine="predefineColors"
                            @change="(val) => onChangeNodeProps('stroke', val)"
                        >
                        </el-color-picker>
                    </el-form-item>
                    <template v-if="categoryText.includes(formData.category)">
                        <el-form-item label="文本尺寸">
                            <el-input-number
                                style="width: 198px"
                                v-model="formData.fontSize"
                                @change="
                                    onChangeNodeProps(
                                        'fontSize',
                                        formData.fontSize
                                    )
                                "
                                :min="1"
                                label="请输入"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="文本对齐">
                            <el-button
                                class="text-btn"
                                :class="{ btnChecked: isChecked(index) }"
                                v-for="(item, index) in textAlginList"
                                :key="item.key"
                                size="mini"
                                @click="oncheckedAlgin(item.key, index)"
                                >{{ item.value }}</el-button
                            >
                        </el-form-item>
                        <el-form-item
                            label="文本加粗"
                            style="display: inline-block"
                        >
                            <el-switch
                                v-model="formData.fontWeight"
                                @change="
                                    onChangeNodeProps(
                                        'fontWeight',
                                        formData.fontWeight
                                    )
                                "
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item
                            label="下划线"
                            style="margin-left: 10px; display: inline-block"
                        >
                            <el-switch
                                v-model="formData.underline"
                                @change="
                                    onChangeNodeProps(
                                        'underline',
                                        formData.underline
                                    )
                                "
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item
                            label="文本颜色"
                            style="margin-bottom: 0; display: inline-block"
                        >
                            <el-color-picker
                                v-model="formData.stroke"
                                @change="
                                    onChangeNodeProps('stroke', formData.stroke)
                                "
                            ></el-color-picker>
                        </el-form-item>
                        <el-form-item
                            label="背景颜色"
                            style="margin-left:10px; display: inline-block"
                        >
                            <el-color-picker
                                v-model="formData.background"
                                show-alpha
                                @change="
                                    onChangeNodeProps(
                                        'background',
                                        formData.background
                                    )
                                "
                            ></el-color-picker>
                        </el-form-item>
                    </template>
                    <template v-if="categoryDir.includes(formData.category)">
                        <el-form-item label="方向" class="">
                            <el-button
                                class="text-btn"
                                :class="{ dirChecked: isCheckedDir(index) }"
                                v-for="(item, index) in dirList"
                                :key="item.key"
                                size="mini"
                                @click="oncheckedDir(item.key, index)"
                                >{{ item.name }}</el-button
                            >
                        </el-form-item>
                    </template>
                    <template v-if="formData.category === 'circularLight'">
                        <el-form-item label="灯状态">
                            <el-select
                                v-model="formData.lightState"
                                placeholder="请选择"
                                @change="
                                    (val) =>
                                        onChangeNodeProps('lightState', val)
                                "
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template v-if="formData.category === 'doubleLight'">
                        <el-form-item label="灯状态">
                            <el-select
                                v-model="formData.lightState"
                                placeholder="请选择"
                                @change="
                                    (val) =>
                                        onChangeNodeProps('lightState', val)
                                "
                            >
                                <el-option
                                    v-for="item in doubleLightOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template v-if="formData.category === 'straightLine'">
                        <el-form-item label="类型">
                            <el-select
                                clearable
                                v-model="formData.trackType"
                                placeholder="请选择"
                                @change="onChangeTrackType"
                            >
                                <el-option
                                    v-for="item in trackOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="颜色" v-if="!formData.trackType">
                            <el-color-picker
                                v-model="formData.stroke"
                                :predefine="predefineColors"
                                @change="
                                    (val) => onChangeNodeProps('stroke', val)
                                "
                            >
                            </el-color-picker>
                        </el-form-item>
                    </template>
                    <el-form-item label="显示描述">
                        <el-switch
                            v-model="formData.textVisible"
                            @change="
                                onChangeNodeProps('textVisible', formData.textVisible)
                            "
                        >
                        </el-switch>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="自定义信息" name="second">
                <div class="custom-header">
                    <div>名称</div>
                    <div>值</div>
                    <div>
                        <i
                            class="el-icon-circle-plus-outline"
                            @click="onAddProps"
                        ></i>
                    </div>
                </div>
                <div class="custom-content">
                    <div
                        class="custom-header"
                        v-for="(item, index) in customFormList"
                    >
                        <div>
                            <el-input
                                clearable
                                v-model="item.name"
                                size="mini"
                                placeholder="请输入"
                            ></el-input>
                        </div>
                        <div>
                            <el-input
                                clearable
                                v-model="item.value"
                                size="mini"
                                placeholder="请输入"
                            ></el-input>
                        </div>
                        <div>
                            <i
                                class="el-icon-remove-outline"
                                @click="delProps(index)"
                            ></i>
                        </div>
                    </div>
                </div>
                <div class="custom-footer">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="saveCustomData(formData.customData)"
                        >保存</el-button
                    >
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    name: "demo",
    props: {
        formData: {
            //接收所选择的节点对象
            type: Object,
            defalut: () => {},
        },
        myDiagram: {
            type: Object,
            defalut: () => {},
        },
        customFormList: {
            type: Array,
            defalut: () => [
                {
                    name: "",
                    value: "",
                },
            ],
        },
    },
    components: {},
    data() {
        return {
            categoryDir:['carHead','ironShoes'],
            categoryColor: ["breakpoint", "breakpoint2", "rectangle",'semiAutomaticBlock'],
            predefineColors: [
                "#FF0000",
                "#0000FF",
                "#00FF00",
                "#FFFF00",
                "#4BA9E5",
            ],
            dirList: [
                {
                    key: "None",
                    name: "向左",
                },
                {
                    key: "FlipHorizontal",
                    name: "向右",
                },
            ],
            current: -1,
            currentDir: -1,
            textAlginList: [
                {
                    key: "left",
                    value: "左对齐",
                },
                {
                    key: "center",
                    value: "居中",
                },
                {
                    key: "right",
                    value: "右对齐",
                },
            ],
            categoryRect: ["ironShoes", "carHead", "circularLight"],
            categoryText: [
                "rectangleText",
                "GeneralCharacters",
                "GeneralCharacters2",
                "DirectionName",
            ],
            activeName: "first", //右侧属性默认页签
            options: [
                {
                    value: "1",
                    label: "状态1",
                },
                {
                    value: "2",
                    label: "状态2",
                },
                {
                    value: "3",
                    label: "状态3",
                },
                {
                    value: "4",
                    label: "状态4",
                },
                {
                    value: "5",
                    label: "状态5",
                },
            ],
            doubleLightOptions: [
                {
                    value: "1",
                    label: "状态1",
                },
                {
                    value: "2",
                    label: "状态2",
                },
                {
                    value: "3",
                    label: "状态3",
                },
            ],
            trackOptions: [
                {
                    value: "commonLine",
                    label: "股道",
                },
                {
                    value: "noFault",
                    label: "无岔",
                },
                {
                    value: "forkFront",
                    label: "岔前",
                },
                {
                    value: "contraposition",
                    label: "反位",
                },
                {
                    value: "location",
                    label: "定位",
                },
                {
                    value: "section",
                    label: "区间",
                },
                {
                    value: "guide",
                    label: "辅助线",
                },
                {
                    value: "specialLine",
                    label: "专用线",
                },
            ],
        };
    },
    filters: {
        nodeWidth(val) {
            return val ? Number(val.split(" ")[0]) : "";
        },
        nodeHeight(val) {
            return val ? Number(val.split(" ")[1]) : "";
        },
    },
    computed: {
        isChecked() {
            return (index) => {
                let arr = ["left", "center", "right"];
                this.current = arr.indexOf(this.formData.textAlign);
                return index === this.current;
            };
        },
        isCheckedDir() {
            return (index) => {
                let arr = ["None", "FlipHorizontal"];
                this.current = arr.indexOf(this.formData.flip);
                return index === this.current;
            };
        },
    },
    watch: {},
    methods: {
        onChangeTrackType(val) {
            if (val) {
                let name = "";
                this.trackOptions.forEach((item) => {
                    if (val === item.value) {
                        name = item.label;
                    }
                });
                this.onChangeNodeProps("trackType", val);
                this.onChangeNodeProps("nodeName", name);
            } else {
                this.onChangeNodeProps("trackType", null);
                this.onChangeNodeProps("nodeName", "");
            }
        },
        oncheckedDir(val, index) {
            this.currentDir = index;
            this.onChangeNodeProps("flip", val);
        },
        onAddProps() {
            let obj = {
                name: "",
                value: "",
            };
            this.customFormList.push(obj);
        },
        delProps(index) {
            this.customFormList.splice(index, 1);
        },
        //文本对齐
        oncheckedAlgin(val, index) {
            this.current = index;
            this.onChangeNodeProps("textAlign", val);
        },
        onChangeNodeProps(prop, val) {
            this.publicChange(this.formData.key, prop, val);
        },
        /**改变当前选中节点属性的公用方法 */
        publicChange(key, prop, val) {
            let nodeData = this.myDiagram.findNodeForKey(key).data; //用例获取选中的节点或线
            let _this = this;
            //所有模型更改都应该发生在事务中
            _this.myDiagram.model.commit(function (m) {
                m.set(nodeData, prop, val);
                _this.$emit("update-view");
            }, "flash");
        },
        //保存自定义信息
        saveCustomData() {
            this.onChangeNodeProps("customData", this.customFormList);
            this.$message.success('操作成功')
        },
    },
    created() {},
    mounted() {},
};
</script> 
<style lang='less'>
.gojs_page_right {
    .el-form-item {
        margin-bottom: 15px;
    }
    .el-tabs {
        height: 100%;
        .el-tabs__content {
            overflow-y: auto;
            height: calc(~"100% - 55px");
        }
    }
}
</style>
<style lang='less' scoped>
@import "./index.less";
</style>
